<template>
  <div class="salary-container">
    <!-- <van-nav-bar
      style="background-color: #fff;"
      title="工资发放记录查询"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <header-card :myProp="myProp"></header-card>
    <div class="main-box">
      <div class="search-box">
        <div class="change-record">
          <div class="record-title">工资发放记录</div>
          <div class="record-year">
            <span @click="changeYear">{{recordYear}} 年<van-icon :name="recordArrow" /></span>
          </div>
        </div>
        <div v-show="recordList1.length !== 0" class="record-list" v-for="(item, index) in recordList1" :key="index" :class="index % 2 == 1 ? 'record-list-active' : ''">
          <div class="list-item" style="color: #a7a7a7;">{{item.salaryDate}}</div>
          <div class="list-item" style="text-align: center; color: #a7a7a7;">{{item.bankAccount}}</div>
          <div class="list-item" style="text-align: right; color:#f27272;">{{item.salary}}</div>
        </div>
        <div class="record-list-none" v-show="recordList1.length === 0">
          <img src="@/assets/image/none_icon.png" alt="" srcset="">
          <div>暂无数据</div>
        </div>
      </div>
    </div>
    <div class="picker-box">
      <van-popup round @click-overlay="recordArrow = 'arrow-down'" v-model="show" position="bottom">
        <van-picker
          title="选择年份"
          show-toolbar
          :default-index="0"
          :columns="yearColumns"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import HeaderCard from '@/components/headerCard.vue'
import Crypto from '@/utils/crypto.js'
import { querySalary } from '@/api/salaryRecord'
const currentTime = new Date().getFullYear() // 获取当前年份
const startTime = 1990 // 初始年份
const timeRange = currentTime - startTime
const yearColumns = []
for (let i = 0; i <= timeRange; i++) {
  yearColumns[i] = (currentTime - i)
}
export default {
  name: 'salaryRecordSearch',
  data () {
    return {
      yearColumns: yearColumns, // 年份列表
      show: false,
      myProp: {
        username: '刘*红',
        idNum: '440223********2235',
        isIndex: false
      },
      username: '', // 用户名
      phone: '', // 手机号
      recordYear: currentTime, // 当前年份
      recordArrow: 'arrow-down',
      recordList1: [
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        },
        {
          salaryDate: '10-10 10:11-12',
          bankAccount: '尾号3021',
          salary: '+3000.00'
        }
      ],
      currentDate: new Date(), // 获取当前时间
      // recordList1: [] // 查询到的工资列表
    }
  },
  components: {
    'header-card': HeaderCard
  },
  created () {
    this.searchSalaryList()
  },
  methods: {
    // 查询工资发放记录
    searchSalaryList () {
      querySalary({
        bankAccount: Crypto.encrypt(localStorage.getItem('bankAccount'), this.aesKey, this.aesKeyIv),
        idCard: Crypto.encrypt(localStorage.getItem('idCard'), this.aesKey, this.aesKeyIv),
        year: this.recordYear,
        userName: localStorage.getItem('userName')
      }).then(res => {
        if (res.msg === '查询没有数据') {
          this.$toast(res.msg)
          // this.recordList1 = []
          return
        }
        res.data.forEach(value => {
          const bankAccount = Crypto.decrypt64(value.bankAccount, this.aesKey, this.aesKeyIv)
          value.bankAccount = '尾号' + bankAccount.slice(bankAccount.length - 4, bankAccount.length)
          value.salary = '+' + value.salary + '.00'
          value.salaryDate = value.salaryDate.slice(5, value.salaryDate.length)
        })
        this.recordList1 = res.data
        this.$toast('查询成功')
      })
    },
    onConfirm (value, index) {
      console.log(value, index)
      this.show = false
      this.recordYear = value
      this.recordArrow = 'arrow-down'
      this.$toast.loading({
        message: '加载中...',
        forbidClick: false,
        loadingType: 'spinner'
      })
      this.searchSalaryList()
    },
    // 切换年份
    changeYear () {
      this.recordArrow = 'arrow-up'
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
.salary-container{
  min-height: 100vh;
  font-size: 14px;
  background-color: #f8f8f8;
  .main-box{
    position: relative;
    background-color: #f8f8f8;
    .search-box{
      width: 88%;
      margin: 0 3.5%;
      border-radius: 5px;
      position: relative;
      top: -60px;
      padding: 10px;
      background-color: #fff;
      // box-shadow: 1px 2px 10px #ccdaf8;
      .change-record{
        display: flex;
        font-size: 16px;
        padding: 10px;
        .record-title{
          flex: 50%;
        }
        .record-year{
          flex: 50%;
          color:#0f72fd;
          text-align: right;
        }
      }
      .record-list{
        padding: 10px;
        display: flex;
        .list-item{
          height: 35px;
          line-height: 35px;
          flex: 33%;
        }
      }
      .record-list-none{
        text-align: center;
        position: relative;
        & img{
          width: 50%;
          height: 50%;
        }
        & > div{
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 10px;
          color: #d6d6d6;
        }
      }
      .record-list-active{
        background-color: #f6f9ff;
      }
      .btn{
        margin-top: 15px;
      }
    }
  }
  .picker-box /deep/ {
    .van-picker__confirm{
      color: red;
      background-color: #0f72fd;
    }
  }
  .empty-box{
    height: 50px;
    width: 100%;
    background-color: red;
  }
}
</style>
